<template>
  <el-dialog title="确认提交" width="500" :before-close="handleClose">
    <div class="alert alert-warning">
      <i class="bi bi-exclamation-triangle me-2"></i
      >您确定要提交考试吗？提交后将无法修改答案。
    </div>
    <div id="submit-summary">
      <p>
        <strong>已答题目：</strong><span>{{ answeredCount }}</span
        >/{{ totalQuestions }}
      </p>
      <p>
        <strong>未答题目：</strong><span>{{ unansweredCount }}</span
        >/{{ totalQuestions }}
      </p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">继续作答</el-button>
        <el-button type="primary" @click="confirmSubmit"> 确认提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  answeredCount: {
    type: Number,
    default: 0,
  },
  totalQuestions: {
    type: Number,
    default: 30,
  },
});

const dialogVisible = ref(false);

const unansweredCount = computed(
  () => props.totalQuestions - props.answeredCount,
);

const open = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const confirmSubmit = () => {
  // Implement your submission confirmation logic here
  console.log("确认提交考试");
  ElMessage.success("考试已提交！");
  handleClose();
};

defineExpose({
  open,
});
</script>

<style scoped>
.alert {
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.bi {
  display: inline-block;
  font-size: 1rem;
  vertical-align: -0.125em;
  fill: currentcolor;
}
</style>
